<template>
  <dpro-modal
    :destroyOnClose="true"
    class="preview-img-modal"
    title="选择设备"
    :width="'fit-content'"
    :visible="visible"
    :footer="null"
    @cancel="close"
    :getContainer="getContainer"
    >
    <div class="add-device-wrap">
        <!-- 左侧设备菜单 -->
        <div class="add-device-left">
          <div class="title">监控目录</div>
          <div class="list">
            <tree-search-header ref="tree-search-header" @search="searchSubmit" @clear="closeSearch"></tree-search-header>

            <!-- <a-spin :spinning="isTreeSpinning"> -->
            <org-tree
              class="my-tree"
              :treeType="1"
              @check="onCheck"
              :isCheckBox="true"
              :isSearch="true"
              ref="org-tree"
              :cardInfo="cardInfo"
            />
              <!-- -->
            <!-- </a-spin> -->
          </div>
        </div>
        <!-- 中间操作按钮 -->
        <div class="add-device-center">
          <template v-if="!disabled">
            <dpro-button ghost type="primary" class="add-btn" @click="addSelectedKeys">
              <span>添加</span>
              <img src="./assets/images/icon_down.png" alt />
            </dpro-button>
            <dpro-button ghost type="primary" class="del-btn" @click="deleteSelectedKey">
              <img src="./assets/images/icon_down.png" alt />
              <span>删除</span>
            </dpro-button>
            <dpro-button ghost type="primary" class="rest-btn" @click="resetSelectedKeys"
              >重选</dpro-button
            >
          </template>
        </div>
        <!-- 右侧选择设备 -->
        <div class="add-device-right">
          <div class="title">
            <div class="title-left">已选择设备</div>
          </div>
          <div class="list">
            <template v-if="!disabled">
              <!-- <div class="check-div" v-for="(item) in selectedListData" :key="item.deviceCode">
                <input id="input" class="input"  type="checkbox" v-model="deviceType" :value="item.deviceCode">
                <label class="ant-tree-checkbox-inner" for="input"></label >
                <span>{{item.deviceName}}</span>
              </div> -->
              <label class="item" role="checkbox" v-for="item in selectedListData" :key="item.deviceCode">
                <span class="outer-checkbox">
                    <input type="checkbox" v-model="deviceType" :value="item.deviceCode">
                    <span class="inner-checkbox"></span>
                  </span>
                <img
                  class="icon-device"
                  :src="require('./assets/icons/iCON_Divers_online_normal-nocloud.png')"
                />
                <span class="icon-device-name">{{item.deviceName}}</span>
                
            </label>
            </template>
            <template v-else>
              <div class="item" v-for="item in selectedListData" :key="item.key">
                <div class="item-text">
                  <span>{{ item.deviceName }}</span>
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>
    <div class="alert-detail-footer">
      <dpro-button class="alert-detail-footer-btn" type="primary" @click.native="confirm">完成添加</dpro-button>
    </div>
  </dpro-modal>
</template>

<script>
import { DproModal, DproButton } from "../../components/index";
import OrgTree from '../sider-tree/org-tree.vue';
import TreeSearchHeader from '../sider-tree/tree-search-header.vue';

export default {
  name: "dp-device-modal",
  props:{
    cardType: {
      type: Number,
      default: 1
    },
    getContainer: {
      type: Function,
      default: () => document.body
    },
     // 是否禁止操作
    disabled: {
      type: Boolean,
      default: false
    },
    // 当前信息
    info: {
      type: Array,
      default: () => []
    },
    cardIndex: {
      type: [String,Number]
    },
    cardInfo: {
      type: Object,
    }
  },
  data() {
    return {
      visible: false,
      previewImg: '',
      cardVal: '',
      selectedListData: [], //右侧选中设备数量
      deviceList: [], //左侧设备列表
      deviceType: []
    };
  },
  computed: {

  },
  mounted() {
    
  },
  methods: {
    searchSubmit(searchText, searchType) {
      this.$refs['org-tree'].searchSubmit(searchText, searchType)
    },
    closeSearch() {
      // this.$refs['org-tree'].refreshTree()

      this.$refs['org-tree'].closeSearch()
    },
    open(deviceList) {
      console.log('deviceList',deviceList, this.cardInfo);
      this.selectedListData = deviceList
      // this.deviceList = [...deviceList]
      // this.selectedListData = deviceList.map(v=>{
      //   v.value = v.deviceCode
      //   return v
      // })
      this.visible = true;
    },
    /**
     * 打开弹窗或者关闭弹窗时通过修改卡片容器的z-index来解决弹窗层级的问题
     * @param {Boolean} back 是否重置z-index，关闭弹窗时传true
     */
     setZindex(back = false) {
      typeof(window.handleCardZIndex) === 'function' && window.handleCardZIndex({cardId: this.cardInfo.cardId, index:this.cardInfo.index, back});
    },
    close() {
      this.visible = false;
      this.$refs['tree-search-header'].clearInput()
      this.$refs['org-tree'].refreshTree()
      this.$refs['org-tree'].closeSearch()
      this.deviceList = []
    },
    confirm() {
      console.log('confirm',this.selectedListData);
      this.$emit('chooseDevice', [...this.selectedListData])
      this.resetSelectedKeys();
      this.close()
    },
    onCheck(checkedDevices) {
      this.onChangeFileList(checkedDevices);
    },
     // 左侧选中设备
     onChangeFileList(checkedDevices) {
      this.deviceList = checkedDevices.map((it) => {
        return {
          ...it,
          isCheck: true
        };
      });
    },
    // 右侧设备选中
    onRightChange(e, item, index) {
      this.selectedListData[index].isCheck = e.target.checked;
    },
    // 添加按钮操作
    addSelectedKeys() {
      let selectDeviceList = this.deviceList.filter((e) => e.isCheck === true);
      let rightDeviceList = selectDeviceList.map((item) => {
        return {
          isCheck: false,
          deviceCode: item.deviceCode,
          value: item.deviceCode,
          deviceName: item.deviceName,
          onlineStatus: item.onlineStatus
        };
      });
      const unionResult = [...this.selectedListData, ...rightDeviceList].filter(function (obj) {
        return this.has(obj.deviceCode) ? false : this.add(obj.deviceCode);
      }, new Set());
      this.selectedListData = unionResult;
      // this.selectedListData = selectDeviceList.map(v=>{
      //   // v.label = v.deviceName
      //   v.value = v.deviceCode
      //   return v
      // });
    },
    // 删除操作
    deleteSelectedKey() {
      this.selectedListData = this.selectedListData.filter((el) => this.deviceType.includes(el.deviceCode) === false);
      this.deviceType = []
      console.log(this.selectedListData,this.deviceType);

    },
    // 重选操作
    resetSelectedKeys() {
      this.selectedListData = [];
      // this.deviceList = []
    },
  },
  watch: {
    visible(val) {
      if(val) this.setZindex(!val)
    }
  },
  components: { OrgTree, TreeSearchHeader, DproModal, DproButton },
};
</script>

<style lang="less" scoped>
@import url("./dp-device-modal.less");


</style>
